﻿<script src="~/Scripts/jquery-easyui-extensions/progressbar/jeasyui.extensions.progressbar.setText.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
    <div id="p" class="easyui-progressbar" data-options="value:90" style="width:400px;"></div>
    <br />
    <a id="btnBegin" class="easyui-linkbutton" data-options="iconCls:'icon-add'">开始加载，每秒增加1%，100%后，显示文本“完成”</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a id="btnStop" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">暂停加载”</a>
    <br /><br />
    <a id="btnReset" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">重置进度条</a>
</div>

<script>
    $(function () {
        var timeoutId;
        $("#btnBegin").click(function () {
            var pro = $("#p"), value = pro.progressbar("getValue");
            value += 1;
            var adding = function (newValue) {
                //console.log("进度：" + newValue + "，上次定时器id：" + timeoutId);
                if (newValue < 100) {
                    pro.progressbar("setValue", newValue);
                    newValue += 1;
                    timeoutId = $.util.delay(function () { adding(newValue) }, 1000);
                } else {
                    pro.progressbar("setValue", newValue);
                    pro.progressbar("setText", "完成");
                }
            };

            timeoutId = $.util.delay(function () { adding(value); });
        });

        $("#btnStop").click(function () {
            window.clearInterval(timeoutId);
        });

        $("#btnReset").click(function () {
            $("#p").progressbar("setValue", 90);
            $("#p").progressbar("setText", "90%");
        });

    });
</script>